<template>
  <view class="page custom-page">
    <custom-head>
      <div class="home_head flex a-center j-center" @tap="selectShow = !selectShow">
        <view class="title">{{ schoolName }}</view> <u-icon name="arrow-down" color="#8F9399" size="26"></u-icon>
      </div>
      <head-select :id.sync="active" :visible.sync="selectShow" @select="handelSelect"></head-select>
    </custom-head>
    <view class="main">
      <view class="user_box u-flex" @click="handleUserInfoClick">
        <image class="avatar" :src="userInfo.avatar"></image>
        <view class="u-flex u-flex-col u-flex-1 u-col-top u-m-l-20">
          <text class="u-font-xl bold">{{ userInfo.nickname }}</text>
          <text class="u-font-md">{{ userInfo.name }}</text>
        </view>
        <u-icon name="arrow-right"></u-icon>
      </view>

      <view class="tab_list">
        <view class="tab_item u-flex u-p-t-40 u-p-b-40 u-p-l-44 u-p-r-44" v-for="tab in tabList" :key="tab.url" @click="handleJump(tab.label)">
          <image class="tab_img" :src="tab.img" mode="aspectFill"></image>
          <text class="title u-flex-1 u-font-30 u-m-l-20 bold">{{ tab.label }}</text>
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>

    </view>
    <custom-tabbar :index="2"></custom-tabbar>
  </view>
</template>

<script>
import { unix } from 'dayjs';
import { toPage } from '../../utils/index.js';
import { init, loginA } from "../../utils/getData";
import md5 from 'md5';

export default {
  data() {
    return {
      active: 1,
      selectShow: false,
      tabList: [
        {
          label: '我的学校',
          img: '../../static/img/mine01.png',
          url: '/pages/'
        },
        {
          label: '系统设置',
          img: '../../static/img/mine02.png',
          url: '/pages/mine/setting'
        },
        {
          label: '推荐好友',
          img: '../../static/img/mine03.png',
          url: '/pages/mine/recommend'
        },
        {
          label: '联系我们',
          img: '../../static/img/mine04.png',
          url: '/pages/mine/contact'
        }
      ],
      userInfo: {},
      schoolName: '',
      static_uri: getApp().globalData.glb_list.config.static_uri, // 获取全局配置文件
    };
  },
  onShow() {
    const { password, name } = getApp().globalData.loginForm || {}
    loginA({name, password: md5(password)})
  },
  mounted() {
    this.userInfo = {
      ...getApp().globalData.glbCurrentDataMap,
      avatar: `${this.static_uri}${getApp().globalData.glbCurrentDataMap.avatar}`
    }
    this.active = this.school?.id
    this.schoolName = this.glbSchoolName
    console.log('--登入成功', getApp().globalData)
  },

  methods: {
    handelSelect(e) {
      getApp().globalData.glb_list.glbId = e; // 获取全局选中的 id，哪个学校
      console.log(e, '测试---', getApp().globalData.school)
      // console.log('哪个学校的',getApp().globalData.schools )
      let selectSchool = getApp().globalData.schools.filter(i => i.id === e)[0]
      this.schoolName = selectSchool.name
      getApp().globalData.glb_list.glbSchoolName = selectSchool.name;

      getApp().globalData.school = {
        ...getApp().globalData.school,
        ...selectSchool
      }
      this.active = e
    },

    handleJump(param) {
      console.log('---', param)
      if (param === '我的学校') {
        uni.navigateTo({
          url: `/pages/school/addition?param=${param}`
        })
      } else if (param === '系统设置') {
        uni.navigateTo({
          url: `/pages/mine/mineStyleSetup`
        })
      } 
    },

    toPage,

    handleUserInfoClick() {
      console.log(';id', this.userInfo?.id)
      if (this.userInfo.id) {
        this.toPage(`/pages/mine/mineInfo?id=${this.userInfo?.id}`);
      } else {
        this.toPage('/pages/mine/login');
      }
    }
  }
};
</script>

<style lang="scss" scoped>
$color: #303133;

.home_head {
  font-size: 32rpx;
  color: $color;
  position: relative;
  z-index: 99;
  background-color: #fff;

  .title {
    margin-right: 10rpx;

    &:active {
      filter: brightness(200%);
    }
  }
}

.user_box {
  padding: 55rpx 44rpx;
  background-color: #fff;
  border-top: 1px solid #f3f4f5;

  .avatar {
    width: 107rpx !important;
    height: 107rpx !important;
    border-radius: 50%;
  }
}

.tab_img {
  width: 80rpx !important;
  height: 80rpx !important;
  border-radius: 50%;
}

.tab_list {
  background-color: #fff;
  margin-top: 20px;
}
</style>
